﻿@section Styles
    {
    <link rel="stylesheet" href="~/Content/libs/iCheck/all.css" />
    <style>
        .assign-div .form-group {margin-bottom: 0;}
        .child-div {margin-left:25px;margin-bottom:5px;}
        .child-div label { margin-right:10px;font-weight:normal;cursor:pointer;}
    </style>
}
<div id="pageBox">
    <div class="box">
        <div class="box-header"><h3 class="box-title">Assign</h3></div>
        <div class="box-body">

            @{ if (ViewBag.tree == null) { return; }; var tree = ViewBag.tree;}

            <label>
                <input id="all_check" type="checkbox" class="minimal blue">
                ALL ACTION
            </label>
            
            @foreach (var ccc in tree)
            {
                <div class="assign-div">
                    <div class="form-group">
                        <label>
                            <!--一级-->
                            <input name="opVal"  value="@ccc.Id" type="checkbox" id="@ccc.Id" class="minimal blue be-f" data-id="@ccc.Id" @(ccc.Id == 1 || ccc.Check == true ? "Checked" : "")>
                            @ccc.Name
                        </label>
                    </div>
                    @foreach (var cc in ccc.Child)
                    {
                        <div class="child-div child-@ccc.Id">
                            <!--二级-->
                            <label> <input name="opVal" value="@cc.Id"  type="checkbox" id="@cc.Id" class="minimal blue be-f-@ccc.Id be-t" data-pid="@ccc.Id" @(cc.Check == true ? "Checked" : "")>@cc.Name</label>
                            @foreach (var c in cc.Child)
                            {
                                <!--三级-->
                                <label>
                                    <input name="opVal"  value="@c.Id" type="checkbox" id="@c.Id" class="minimal red be-f-@ccc.Id be-th" data-pid="@ccc.Id" data-tid="@cc.Id" @(c.Check == true ? "Checked" : "")>
                                    @c.Name
                                </label>

                            }
                        </div>
                    }

                </div>
            }
        <p class="text-center"><button class="btn btn-danger" v-on:click="Submit()">Submit</button></p>
        </div>
    </div>
    </div>
    @section Scripts
    {
        <script type="text/javascript" src="~/Content/libs/iCheck/icheck.min.js"></script>
        <script>
            var MyVue = new Vue({
                el: "#pageBox",
                data: {},
                mounted: function () {
                    this.iCheck();
                },
                methods: {
                    iCheck:function () {
                        // 激活 iCheck
                        $('input[type="checkbox"].minimal.blue').iCheck({
                            checkboxClass: 'icheckbox_minimal-blue'
                        });
                        $('input[type="checkbox"].minimal.red').iCheck({
                            checkboxClass: 'icheckbox_minimal-red'
                        });
                        //不触发事件，只改变状态
                        var NoCheckDO = false;
                        //全选
                        $('#all_check').on('ifChecked', function (event) {
                            if (NoCheckDO == true) { return; }
                            $('input[type=checkbox]').iCheck('check');
                        }).on('ifUnchecked', function (event) {
                            if (NoCheckDO == true) { return; }
                            $('input[type=checkbox]').iCheck('uncheck');
                        });

                        //一级菜单全选和反选

                        $(".be-f").on('ifUnchecked', function (event) {
                            if (NoCheckDO == true) { return; }
                            var id = $(this).data("id");
                            $('.be-f-' + id).iCheck('uncheck');
                        }).on('ifChecked', function (event) {
                            if (NoCheckDO == true) { return; }
                            var id = $(this).data("id");
                            $('.be-f-' + id).iCheck('check');
                        });

                        //三级单个选择
                        $(".child-div input[type=checkbox]").on('ifChecked', function (event) {
                            var tid = 0;
                            if ($(this).is('[data-tid]')) {
                                tid = $(this).data("tid");
                            }
                            var pid = $(this).data("pid");
                            if (tid > 0) {
                                $('#' + tid).iCheck('check');
                            }
                            NoCheckDO = true;
                            $('#' + pid).iCheck('check', function () {
                                NoCheckDO = false;
                            });
                        }).on('ifUnchecked', function (event) {
                            NoCheckDO = true;
                            $('#all_check').iCheck('uncheck', function () {
                                NoCheckDO = false;
                            });
                            if ($(this).hasClass("be-t")) {
                                var id = $(this).attr("id");
                                $("input[data-tid=" + id + "]").iCheck('uncheck');
                            }

                            //如果全部取消了
                            var pid = $(this).data("pid");
                            if ($(".child-" + pid + " input[type=checkbox]").filter(':checked').length == 0) {
                                $('#' + pid).iCheck('uncheck');
                            }

                        });


                    },
                    Submit: function () {
                        var checkBoxArr = [];
                        $('input[name="opVal"]:checked').each(function () {
                            checkBoxArr.push($(this).val());
                        });

                        //console.log(checkBoxArr);
                        if (checkBoxArr.length == 0) {
                            admin.msg("No items Selected","Warning")
                            return;
                        }
                        admin.ajax({
                            url: '@Url.Action("AssignDo")',
                            data: {ids:checkBoxArr,roleId:@(ViewBag.roleId)},
                            loading: true,
                            success: function (r) {
                                if (r.status == 1) {
                                    console.log(r);
                                    admin.msg("Save Success!","Success");
                                }
                                else {
                                    admin.msg(r.msg,"Warning");
                                }
                            }
                        });

                    }
                },


            });

        </script>
    }
